<template>
  <div class="question_box">
    <div class="yellow_title">
      <div class="blue"></div>
      联系人信息
    </div>
    <div class="bott">
      <div class="left">联系人</div>
      <input type="text" v-model="formName" class="bottom right_input" placeholder="请输入内容" @input="changeName" />
    </div>
    <div class="bott">
      <div class="left">电话号码</div>
      <input v-model="formPhone" type="number" class="bottom right_input" placeholder="请输入内容" @input="changePhone" />
    </div>
    <div class="bott">
      <div class="left">问题描述</div>
      <input class="question_input bottom" @input="changeData" v-model="images" placeholder="请输入内容" />
    </div>
    <div class="bott">
      <div class="left">预约时间</div>
      <input type="date" placeholder="请选择日期" @input="confirmTime" />
    </div>
    <div class="left bott">故障图片/视频上传</div>
    <div class="img_box bott">
      <div class="show_img">
        <div class="del_box" v-for="(item, index) in dataImg" :key="index">
          <img v-if="item.type == 'image'" :src="item.url" class="ok_img" />
          <div v-else class="video-box">视频已上传</div>
          <img class="del_img" @click="delImg(index)" src="../assets/delect.png" />
        </div>
        <div class="addImg" v-if="dataImg.length < 3">
          <!-- <input class="input_img" type="file" @change="uploadImg" accept="image/*, video/*" ref="clearFile" multiple /> -->
          <input class="input_img" type="file" @change="uploadImg" accept="video/*" ref="clearFile" multiple />
          <div class="img_border" @change="uploadImg">
            <img src="../assets/add.png" class="img_icon" />
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="tro">支持上传9张jpg/png</div> -->
  </div>
  <!-- <div class="title blue_title">问题描述</div> -->
</template>
<script setup>
  import { ref, onMounted } from "vue";
  const props = defineProps({
    dataImg: Array,
    modelValue: String,
    contactName: String,
    phone: Number,
  });
  const emit = defineEmits([
    "uploadImg",
    "delImg",
    "update:modelValue",
    "update:contactName",
    "update:phone",
    "update:yuyue_time",
  ]);

  const formName = ref("");
  const formPhone = ref("");
  const images = ref("");

  onMounted(() => {
    images.value = props.modelValue;
    formName.value = props.contactName;
    formPhone.value = props.phone;
  });

  const uploadImg = () => {
    //上传图片
    emit("uploadImg");
  };
  const delImg = (i) => {
    //删除图片
    emit("delImg", i);
  };
  const changeData = (e) => {
    console.log(e.target.value, "删除图片");
    emit("update:modelValue", e.target.value);
  };
  const confirmTime = (e) => {
    console.log(e.target.value, "eeeeeee");
    emit("update:yuyue_time", e.target.value);
  };
  const changeName = (e) => {
    emit("update:contactName", e.target.value);
  };
  const changePhone = (e) => {
    emit("update:phone", e.target.value);
  };
</script>

<style>
  input[type="date"] {
    width: 320px;
    padding: 10px;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    font-size: 16px;
    color: #000;
    text-align: left !important;
    box-sizing: border-box;
    /* 确保内边距和边框不会影响元素的总宽度 */
  }
</style>